<template>
  <view class="container">
    <u-navbar
      :is-fixed="false"
      :border-bottom="false"
      :is-back="true"
      back-icon-name="arrow-leftward"
      back-icon-size="35"
      :background="{ background: '#101334' }"
      title="设置"
      title-color="aliceblue"
    >
    </u-navbar>
    <view class="list">
      <view class="item">
        <text> 手机号码 </text>
        <view>13207145531</view>
      </view>
      <view class="item">
        <text> 登录密码 </text>
        <view class="right" @click="$u.func.route('/pages/user/modifyPwd')">
          <text>去修改</text>
          <view class="icon">
            <u-image
              width="95%"
              height="20rpx"
              style="font-size: 24rpx; color: red"
              src="/static/demo/icon_right.png"
            ></u-image>
          </view>
        </view>
      </view>
      <!-- <view class="item">
        <text> 支付密码 </text>
        <view class="right" @click="$u.func.route('/pages/user/modifyPayPwd')">
          <text>去修改</text>
          <view class="icon">
            <u-image
              width="95%"
              height="20rpx"
              style="font-size: 24rpx; color: red"
              src="/static/demo/icon_right.png"
            ></u-image>
          </view>
        </view>
      </view> -->

      <view class="item">
        <text> 货币单位 </text>
        <view class="right subsection">
          <u-subsection :list="list" mode="subsection" :current="current" @change="subsectionChange" active-color="#ff9900"></u-subsection>
        </view>
      </view>

      <view class="back" @click="logout">退出登录</view>

      <!-- <view class="item">
        <text> 费率 </text>
        <view class="right input-flex">
          <u-field
            v-model="rate"
            label="费率"
            placeholder="请填写费率"
            placeholder-style="color:#696c89"
            :field-style="fieldStyle"
          >
          </u-field>
        </view>
      </view> -->
    </view>
  </view>
</template>

<script>
export default {
  data() {
			return {
        fieldStyle:{
          width:"300rpx",
          height:"80rpx",
          padding:"0",
          // border:"1px solid red",
          color: "aliceblue"
        },
        rate:7,
				list: [
					{
						name: '人民币'
					}, 
					{
						name: '美元'
					}
				],
				current: 1,
        
			}
		},
    methods: {
      logout() {
				this.$u.func.logout();
			},
      subsectionChange(index){
        this.current = index;
      }
    }
};
</script>
<style lang="scss" scoped>
.container {
  color: aliceblue;
  min-height: 100vh;
  background-color: #101334;
  .list {
    display: flex;
    flex-direction: column;
    .item {
      box-sizing: border-box;
      display: flex;
      position: relative;
      margin: 10rpx auto;
      flex: row;
      justify-content: space-between;
      background-color: #2c303c;
      color: aliceblue;
      width: 90vw;
      height: 80rpx;
      border-radius: 20rpx;
      align-items: center;
      padding: 0 20rpx;
      .right {
        display: flex;
        min-width: 100rpx;

        flex-direction: row;
        justify-content: space-between;
        &.input-flex{
          display: inline-flex;
        }
        .icon {
          margin: auto;
          width: 20rpx;
          height: 20rpx;
        }
      }
    }
  }
  .subsection {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    .u-subsection {
      width: 300rpx;
      height: 30rpx;
    }
  }
  .u-field{
    padding: 0;
    border: none;
  }

  .u-border-bottom:after{
    border: none;
  }
}

.back {
		margin-top: 40rpx;
		text-align: center;
		height: 109rpx;
		background: #101334;

		font-size: 34rpx;
		font-family: Source Han Sans CN;
		font-weight: bold;
		color: aliceblue;
		line-height: 109rpx;
	}
</style>
